<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<title></title>
		<script src="http://www.miniui.com/scripts/jquery.min.js" type="text/javascript"></script>
		<script src="./miniui.js" type="text/javascript"></script>
		<link href="./res/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="./themes/default/miniui.css" rel="stylesheet" type="text/css" />
		<link href="./themes/cupertino/skin.css" rel="stylesheet" type="text/css" />
		<link href="./themes/default/medium-mode.css" rel="stylesheet" type="text/css" />
		<link href="./themes/icons.css" rel="stylesheet" type="text/css" />
		



	</head>

	<body>
		<div class="mini-splitter" style="width: 1200px; height: 800px;">
			<div size="240" showCollapseButton="true">
			
				<div class="mini-fit">
					<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
						<a class="mini-button" iconCls="icon-upload" plain="true" onclick="input()">导入</a>
						<a class="mini-button" iconCls="icon-download" plain="true" onclick="output()">导出</a>
						<a class="mini-button" iconCls="icon-save" plain="true" onclick="output()">保存</a>
					</div>
					<ul id="pageTree" class="mini-tree" style="width: 100%;" showTreeIcon="true" allowDrag="true" allowDrop="true" textField="text" idField="id" resultAsTree="false">
					</ul>
				</div>
			</div>

			<div showCollapseButton="true">
				<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
					<a class="mini-button" iconCls="icon-add" plain="true" onclick="openAddWin()">新增</a>
					<a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeMenu()">删除</a>
					<a class="mini-button" iconCls="icon-save" plain="true" onclick="opendConfigWin()">配置</a>
				</div>

				<div id="dataForm">
					<input id="id" name="id" class="mini-textbox" style="width: 90%" />
					<input id="aa" name="aa" class="mini-textbox" style="width: 90%" />
					<input id="bb" name="bb" class="mini-spinner" style="width: 90%" />
					<input id="cc" name="cc" class="mini-spinner" style="width: 90%" />
					<input id="dd" name="dd" class="mini-textbox" style="width: 90%" />
					<input id="ee" name="ee" class="mini-textbox" style="width: 90%; height: 0;" />
				</div>
			</div>
			
		</div>

	</body>

	<script type="text/javascript">
	
	var dic = [
	{id: "base", text: "Base",
		children: [
			{id: "ajax", text: "Ajax"},
			{id: "json", text: "JSON"},
			{id: "date", text: "Date"},
			{id: "control", text: "Control"},
			{id: "messagebox", text: "MessageBox"},
			{id: "window", text: "Window"}
		]
	},
	{id: "forms", text: "Forms", 
		children: [
			{id: "button", text: "Button"},
			{id: "listbox", text: "ListBox"},
			{id: "checkboxlist", text: "CheckBoxList"},
			{id: "radiolist", text: "RadioList"},
			{id: "calendar", text: "Calendar"},
			{id: "textbox", text: "TextBox"},
			{id: "password", text: "Password"},
			{id: "textarea", text: "TextArea"},
			{id: "combobox", text: "ComboBox"},
			{id: "datepicker", text: "DatePicker"},
			{id: "spinner", text: "Spinner"},
			{id: "treeselect", text: "TreeSelect"},
			{id: "fileupload", text: "FileUpload"}
		]
	},
	{id: "lists", text: "Lists", 
		children: [
			{id: "datagrid", text: "DataGrid"},			
			{id: "tree", text: "Tree"},
			{id: "treegrid", text: "TreeGrid "}
		]
	},
	{id: "layouts", text: "Layouts", 
		children: [
			{id: "panel", text: "Panel"},
			{id: "splitter", text: "Splitter"},
			{id: "layout", text: "Layout "}
		]
	},
	{id: "navigations", text: "Navigations", 
		children: [
			{id: "pager", text: "Pager"},
			{id: "tabs", text: "Tabs"},
			{id: "outlookbar", text: "OutlookBar"},
			{id: "menu", text: "Menu"}
		]
	}
];


		mini.parse();
	

		var dataForm = new mini.Form("#dataForm");

		var tree = mini.get("pageTree");
		tree.loadData(dic);
		//debugger;

		var editNode = null; // 当前编辑的节点
		/*********************************************************
		 * 左侧目录树的鼠标点击事件
		 *********************************************************/
		tree.on("nodeclick", function(e) {
			if(editNode) {
				var data = dataForm.getData();
				//alert(data["aa"]);
				tree.updateNode(editNode, data);
				debugger
			}

			editNode = e.node;
			if(editNode) {
				dataForm.setData(editNode);
			}
		});
	</script>

</html>